<template>
    <div class="homepage" style="margin-top: 6vh;">
      <!-- 第一部分 -->
      <div class="section section1">
        <div class="page1container">
          <div class="content">
          <div class="text">
            <p class="sub" style="color: black;">更便捷的一站式<br>房地产风险信息服务平台</p>
          </div>

          <div class="free">
            <div style="display: flex;flex-direction: row">
              <el-card style="height: 6vh;display: flex; flex-direction: row; justify-content: center; align-items: center;margin-right: 2vh;" shadow="never">
                <div style="display: flex;flex-direction: row;align-items: center">
                  <img src="../assets/房企关联查询.png" style="margin-right: 1vh">
                  <div style="font-size: 20px">房企关联查询</div>
                </div>
              </el-card>
              <el-card style="height: 6vh;display: flex; flex-direction: column; justify-content: center; align-items: center;margin-bottom: 4vh" shadow="never">
                <div style="display: flex;flex-direction: row;align-items: center">
                  <img src="../assets/供应商风险查询.png" style="margin-right: 1vh">
                  <div style="font-size: 20px">供应商风险查询</div>
                </div>
              </el-card>
            </div>
            <el-button class="free-button" type="primary" style="width: 40%; font-size: 1.5vw; border-radius: 5px; height: 38px;"
            @click="start"
            >开始使用&nbsp&nbsp<el-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M754.752 480H160a32 32 0 1 0 0 64h594.752L521.344 777.344a32 32 0 0 0 45.312 45.312l288-288a32 32 0 0 0 0-45.312l-288-288a32 32 0 1 0-45.312 45.312z"></path></svg></el-icon></el-button>
          </div>
        </div>
        </div>
      </div>

<!--&lt;!&ndash;      demo视频&ndash;&gt;-->
<!--      <div class="section">-->
<!--        <div class="demoVideo" id="reveal-top">-->
<!--          <span>这是一个视频</span>-->
<!--        </div>-->
<!--      </div>-->

<!--      第二部分-->
      <div class="section section2" ref="targetSection" id="sec2">
<!--        <div style="display: flex;flex-direction: row;">-->
<!--          <div class="text" style="text-align: center;">-->
<!--            <span class="sub" style="color: black; margin-bottom: 25px;">我们的功能</span>-->
<!--          </div>-->

<!--        </div>-->
        <div style="display: flex; height: 100%; width: 100%; ">
          <div class="func" id="reveal-bounce">
            <div class="cards" style="margin-left: 2%; ">
              <div style="flex: 1; ">
                <div class="text" style="margin-left: 30px; ">
                  <p class="sub" style="color: black; margin-bottom: 25px;">房企关联查询</p>
                  <p class="subtext" style="color: gray;">房地产企业信息，一键掌握</p>
                  <el-button class="free-button" style="width: 35%; font-size: 1.5vw; border-radius: 5px; height: 38px;"
                   @click="companyLook">房地产关联查询&nbsp&nbsp<el-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M754.752 480H160a32 32 0 1 0 0 64h594.752L521.344 777.344a32 32 0 0 0 45.312 45.312l288-288a32 32 0 0 0 0-45.312l-288-288a32 32 0 1 0-45.312 45.312z"></path></svg></el-icon></el-button>
                </div>
              </div>
              <div class="imgs">
                <img src="../assets/QQ截图20240311212543.png" alt="图">
              </div>
            </div>
          </div>
          <div class="func" id="reveal-bounce">
            <div class="cards" style="margin-right: 2%; ">
              <div style="flex: 1; ">
                <div class="text" style="margin-left: 30px; ">
                  <p class="sub" style="color: black; margin-bottom: 25px;">供应商风险查询</p>
                  <p class="subtext" style="color: gray;">供应商风险，一查便知</p>
                  <el-button class="free-button" style="width: 40%; font-size: 1.5vw; border-radius: 5px; height: 38px;"
                   @click="riskLook">供应商风险查询&nbsp&nbsp<el-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M754.752 480H160a32 32 0 1 0 0 64h594.752L521.344 777.344a32 32 0 0 0 45.312 45.312l288-288a32 32 0 0 0 0-45.312l-288-288a32 32 0 1 0-45.312 45.312z"></path></svg></el-icon></el-button>
                </div>
              </div>
              <div class="imgs">
                <img src="../assets/QQ截图20240311212543.png" alt="图">
              </div>
            </div>
          </div>
        </div>

      </div>

<!--      第三部分-->
      <div class="section section3" ref="targetSection">
        <div style="display: flex;flex-direction: column;align-items: center;justify-items: center">
          <div class="text" style="text-align: center;">
            <span class="sub" style="color: black; margin-bottom: 25px;"  id="reveal-slide-right1">为什么选择我们</span>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 3vh">
            <div class="card3container"  id="reveal-slide-right2">
              <el-card class="card3" shadow="hover">
                <div style="width: 100%;height: 30vh">
                  <img src="../assets/更安全的数据保护.png" style="width: 100%;height: auto">
                </div>
                <div style="margin-top: 2vh">
                  <span class="card3title">更安全的数据保护</span>
                </div>
                <div style="margin-top: 2vh;text-align: left;">
                  <span class="card3text">基于联邦学习框架，将用户本地加密与云端模型训练结合，保证数据安全，训练数据真实且充分</span>
                </div>
              </el-card>
            </div>

            <div class="card3container"  id="reveal-slide-right3">
              <el-card class="card3" shadow="hover">
                <div style="width: 100%;height: 30vh">
                  <img src="../assets/更齐全的功能实现.png" style="width: 100%;height: 100%">
                </div>
                <div style="margin-top: 2vh">
                  <span class="card3title">更齐全的功能实现</span>
                </div>
                <div style="margin-top: 2vh;text-align: left;">
                  <span class="card3text">业界首创的房地产产业链一站式金融风险信息平台，房地产或供应商、风险影响或财务预测，你想知道的都在这里</span>
                </div>
              </el-card>
            </div>

            <div class="card3container"  id="reveal-slide-right4">
              <el-card class="card3" shadow="hover">
                <div style="width: 100%;height: 30vh">
                  <img src="../assets/更高性价比的服务.png" style="width: 100%;height: 100%">
                </div>
                <div style="margin-top: 2vh">
                  <span class="card3title">更高性价比的服务</span>
                </div>
                <div style="margin-top: 2vh;text-align: left;">
                  <span class="card3text">面向企业和个人用户提供多种灵活的定价方案，总体价格低于市场传统金融信息服务产品的同时，面向用户提供可定制化的服务</span>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>

<!--      第四部分-->
      <div class="section section4" ref="targetSection">
        <div style="display: flex;flex-direction: column;">
          <div class="text" style="text-align: center;">
            <span class="sub" style="color: black; margin-bottom: 25px;">我们的特色</span>
          </div>
          <div style="display: flex;flex-direction: column;align-items: center">
            <div class="card4row1" id="reveal-card4-1">
              <div class="card4container">
                <div class="card4img">
                  <img src="../assets/信息广泛.png">
                </div>
                <div class="desc4">
                  <div class=card4title>
                    <span>信息广泛</span>
                  </div>
                  <div class="card4text">
                    <span>从公司公告、研究报告、新闻等众多分散渠道中爬取并整合多体裁信息</span>
                  </div>
                </div>
              </div>

              <div class="card4container">
                <div class="card4img">
                  <img src="../assets/来源真实.png">
                </div>
                <div class="desc4">
                  <div class=card4title>
                    <span>来源真实</span>
                  </div>
                  <div class="card4text">
                    <span>利用数据挖掘技术自主构建海量数据库，保留信息来源，信息真实可靠</span>
                  </div>
                </div>
              </div>

              <div class="card4container">
                <div class="card4img">
                  <img src="../assets/预测精准.png">
                </div>
                <div class="desc4">
                  <div class=card4title>
                    <span>预测精准</span>
                  </div>
                  <div class="card4text">
                    <span>基于XGBoost、随机森林模型，参数分层输入，兼顾不同指标影响，预测更精准</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="card4row1" id="reveal-card4-2">
              <div class="card4container">
                <div class="card4img">
                  <img src="../assets/数据安全.png">
                </div>
                <div class="desc4">
                  <div class=card4title>
                    <span>数据安全</span>
                  </div>
                  <div class="card4text">
                    <span>利用联邦学习保证数据安全前提下与各方开展深度合作</span>
                  </div>
                </div>
              </div>

              <div class="card4container">
                <div class="card4img">
                  <img src="../assets/用户友好.png">
                </div>
                <div class="desc4">
                  <div class=card4title>
                    <span>用户友好</span>
                  </div>
                  <div class="card4text">
                    <span>交互式UI设计，简洁易用的功能分区；利用LLM技术给出个性化、人性化回应</span>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
  
      <!-- 第五部分 -->
      <div class="section section5">
        <div class="content2" id="reveal-bounce">
          <div class="text" style="text-align: center;">
            <p class="sub" style="color: black; margin-top: 0; margin-bottom: 10vh;">使用合适的订阅方案获取各种内容</p>
          </div>

          <div class="plans">
            <div class="plan" >
              <div style="display: flex;">            
                <div style="flex: 1; margin-left: 20px; margin-top: 15px;">
                  <p style="color: black; font-weight: bold; font-size: 2vw;margin-top: 5px;margin-bottom: 15px;">个人版</p>
                  <p class="subtext">适合个人使用<br>无限次搜索<br>无限次下载</p>              
                </div>
                <div style="flex: 1;">
                  <p style="color: blue; font-weight: bold; font-size: 4.5vw; margin-top: 15px">29.9</p>
                  <p style="color: gray; font-size: 1.8vw; margin-top: 10px; text-align: center;">RMB/月</p>
                </div>
              </div>
              <div style="display: flex; justify-content: center; height: 6vh; margin-top: 10px">
                <el-button class="free-button" type="primary" style="margin-top: 0;width: 50%; font-size: 1.5vw; border-radius: 5px; height: 38px;" @click="upgrades">现在开通&nbsp&nbsp<el-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M754.752 480H160a32 32 0 1 0 0 64h594.752L521.344 777.344a32 32 0 0 0 45.312 45.312l288-288a32 32 0 0 0 0-45.312l-288-288a32 32 0 1 0-45.312 45.312z"></path></svg></el-icon></el-button>
              </div>
            </div>

            <div class="plan" >
              <div style="display: flex;">            
                <div style="flex: 1; margin-left: 20px; margin-top: 15px;">
                  <p style="color: black; font-weight: bold; font-size: 2vw;margin-top: 5px;margin-bottom: 15px;">团队版</p>
                  <p class="subtext">适合团队使用<br>无限次搜索<br>无限次下载</p>              
                </div>
                <div style="flex: 1;">
                  <p style="color: blue; font-weight: bold; font-size: 4.5vw; margin-top: 15px">199.9</p>
                  <p style="color: gray; font-size: 1.8vw; margin-top: 10px; text-align: center;">RMB/月</p>
                </div>
              </div>
              <div style="display: flex; justify-content: center; height: 6vh; margin-top: 10px">
                <el-button class="free-button" type="primary" style="margin-top: 0;width: 50%; font-size: 1.5vw; border-radius: 5px; height: 38px;" @click="upgrades">现在开通&nbsp&nbsp<el-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M754.752 480H160a32 32 0 1 0 0 64h594.752L521.344 777.344a32 32 0 0 0 45.312 45.312l288-288a32 32 0 0 0 0-45.312l-288-288a32 32 0 1 0-45.312 45.312z"></path></svg></el-icon></el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 6vh;width: 100%; display: flex; justify-content: center;  align-items: center; background-color: white;">
        版权所有&nbsp&nbsp&nbsp@PropriskAI
      </div>
    </div>
  </template>
  
<style scoped>
.homepage {
  display: flex;
  flex-direction: column;
}

.section {
  height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  /* font-size: 24px; */
  font-weight: bold;
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
}

.section1 {
  background-image: url('../assets/背景图.png');
  background-size: 100%;
  background-position: center; /* 可以确保背景图在容器内居中显示 */
}

.section2{
  /*background: linear-gradient(to right top, #cbd9fc 0%, #ebecfe 50%, #eff4fe 100%);*/
}
.func {
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.cards {
  height: 90%; 
  width: 90%; 
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  display: flex; 
  flex-direction: column;
  border-radius: 5px;
  ;background-color: rgba(255,255,255,0.7);
}

.imgs {
  flex: 2; 
  display: flex; 
  justify-content: center;
  width: 100%;
  height: auto;
  /* align-items: center; */
}

.imgs img {
  width: 90%; 
  height: 90%; 
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
}

/* .section2 {
  background-color: white;
}*/
  
.section5 {
  /* background-color: white; */
} 

.content {
  max-width: 600px;
  margin-left: 10%; /* 距离页面最左边的距离 */
  margin-right: auto;

}

.content2 {
  width: 53%;
}
.text {
  margin-bottom: 10px;
  text-align: left;
}
.text .sub {
  font-size: 3vw;
}

.subtext {
  font-size: 1.5vw;
  margin-top: 3px;
  color: gray
}

.buttons {
  margin-bottom: 20px;
  text-align: left;
}

.content .free {
  text-align: left;
}

.free-button {
  background-color: rgb(69, 69, 250); /* 设置按钮背景颜色为蓝色 */
  color: white !important; /* 设置按钮文字颜色为白色 */
  border-color: blue; /* 设置按钮边框颜色为蓝色 */
  transition: background-color 0.3s; /* 添加过渡效果 */

  /* 悬停时颜色变浅蓝色 */
  /* &:hover {
    background-color: deepskyblue;
    border-color: deepskyblue;
  } */

  /* 点击时更浅 */
  &:active {
    background-color: lightblue;
    border-color: lightblue;
  }
}


.plans {
  display: flex;
  justify-content: center;
  width: 100%;
}

.plan {
  border-radius: 5px;
  text-align: left;
  margin: 0 10px;
  flex: 1;
  background-color: rgba(203, 217, 250, 0.4);
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  /* display: flex; */
  width: 100%;
}

.plan p {
  margin-bottom: 10px;
}

.price_button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 24px;
  font-weight: bold;
  color: black
}


/*第三部分*/
.section3{
  width: 100%;
  height: 94vh;
  /*background: linear-gradient(to right top, #cbd9fc 0%, #ebecfe 50%, #eff4fe 100%);*/
}
.card3container{
  width: 20%;
  height: 55vh;
  margin-right: 3vw;
}
.card3{
  width: 100%;
  height: 100%;
}
.card3title{
  font-size: 20px;
  font-weight: bold;
}
.card3text{
  font-size: 14px;
  color: #b4b4b3;
}

/*第四部分*/
.section4{
  width: 100%;
  height: 94vh;
  /*background: linear-gradient(to right top, #cbd9fc 0%, #ebecfe 50%, #eff4fe 100%);*/
}
.card4row1{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10vh;
}
.card4row1 > *:not(:last-child) {
  margin-right: 2vw; /* 只给除了最后一个子元素之外的所有元素添加右边距 */
}
.card4container{
  width: 25vw;
  height: 20vh;
  display: flex;
  flex-direction: row;
  background: linear-gradient(to left top, #d7e9fd 0%, #f1f7fe 50%, #fdfdfe 100%);
  border-radius: 5%;
}
.card4img{
  display: flex;
  align-items: center;
  width: 50%;
  justify-content: center;
}
.desc4{
  width: 50%;
  display: flex;
  flex-direction: column;
  color: black;
  text-align: left;
}
.card4title{
  font-weight: bold;
  font-size: 25px;
  margin-top: 3vh;
}
.card4text{
  margin-top: 2vh;
  font-size: 14px;
  color: #b4b4b3;
  text-align: left;
}

.page1container{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.demoVideo{
  width: 40vw;
  height: 35vh;
  background-color: #b4b4b3;
  /*margin-right: 15%;*/
}
</style>
  
  
<script setup lang="ts">
import {useStore} from 'vuex';
import bus from '../bus';
import {ref, reactive, onMounted } from 'vue'
import router from '../router';
import scrollReveal from 'scrollreveal'
import retScroll from '@/utils/scroll.js'

const data = reactive({
  // 在reactive()中声明scrollReveal组件
  scrollReveal: scrollReveal(),
})

onMounted(()=>{
  window.scrollTo(0, 0);
  retScroll(data)
})

const store=useStore()
const targetSection = ref(null);

const start=()=>{
  // 没有token
  if(!store.state.token) {
    bus.emit('/login')
    router.push({path:'/login'})
    return
  }
  // 获取视口的高度  
  const viewportHeight = window.innerHeight;  
  // 计算6vh的偏移量  
  const offset = viewportHeight * (6 / 100);  

  // 获取目标元素相对于视口的位置  
  const targetRect = targetSection.value.getBoundingClientRect();  

  // 计算新的滚动位置  
  const newScrollTop = targetRect.top - offset;  

  // 平滑滚动到新的位置  
  window.scrollTo({  
  top: newScrollTop,
  behavior: 'smooth'  
  });
}

const companyLook=()=>{
  router.push({ path: '/realEstateSearch', query: { q: 'realEstateSearch' }})
  // router.push('/realEstateSearch')
}

const riskLook=()=>{
  router.push('/supplierSearch')
}

</script>


  

  